<script setup lang="ts">
import { computed } from 'vue'
import useStore from '@/stores'
const { homeStore } = useStore()

// 首页样式变量
const styleInt = computed(() => {
    return `<style>
                :root {
                    --fontColor: ${'rgba(' + homeStore.bgColor + ')'};
                }
            </style>`
})

</script>
<template>
    <div class="style-wrap" v-html="styleInt"></div>
    <div class="nav">
        <div class="pr nav-box">
            <div class="pa logo-box">
                <a href="/" class="logo">
                    <img :src="homeStore.navInfo.logo" alt="">
                </a>
                <div class="logo-text">
                    <p class="title">{{homeStore.navInfo.title}}</p>
                    <p class="desc">{{homeStore.navInfo.desc}}</p>
                </div>
            </div>
            <div class="pa navigation">
                <a :href="item.href" :class="{'active': index === 0}" v-for="(item, index) in homeStore.navInfo.navList" :key="`nav${index}`">{{item.name}}</a>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
@import '@/assets/styles/home_pc.scss';
</style>
